<template>
  <div class="history-view">
    <van-nav-bar title="历史观看" left-arrow @click-left="onClickLeft" />
    <van-list
      v-model="loading"
      :finished="finished"
      immediate-check
      finished-text="已显示全部历史观看"
      @load="loadData"
    >
      <div v-if="loadedData.length > 0">
        <div
          class="content-list-wrap"
          v-for="(item, index) in loadedData"
          :key="item.id"
        >
          <VideoCom
            :allContentData="loadedData"
            :contentData="item"
            :isAutoplay="index == 0 ? true : item.isAutoplay"
            :loading="loading"
            :isFollow="item.isFollow"
            :isDislike="item.isDislike"
            :isLike="item.isLike"
            :index="index"
            @getFollowState="getFollowState(item)"
            @getLikeState="getLikeState(item)"
            @getDislikeState="getDislikeState(item)"
            @addShareCount="addShareCount(item)"
            @deleteData="deleteData(item)"
            @goTocomment="goTocomment(item)"
          />
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import VideoCom from "@/components/HomeCom/VideoCom.vue";

export default {
  name: "historyView",
  components: {
    VideoCom,
  },
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
  data() {
    return {
      //显示加载提示
      loading: false,
      //是否加载数据完成
      finished: false,
      //总数据量
      myData: [],
      //加载数据量
      count: 10,
      //数据偏移量
      offset: 0,
      //已加载的数据量
      loadedData: [],
      //函数防抖定时器序号
      timer: null,
    };
  },
  activated() {
    //创建初始化数据
    this.myData = JSON.parse(window.localStorage.getItem("historyData"));
		this.loading=false
		this.finished=false
    this.timer = setTimeout(() => {
      this.getFollowedData();
      this.timer = null;
    }, 100);
  },
  methods: {
    initLoad() {
      let data = this.myData.slice(this.offset, this.offset + this.count);
      this.loadedData.push(...data);
      this.offset += this.count;
      this.loading = false;
      setTimeout(() => {
        //如果本次数据加载不足this.count【30条数据】, 则说明数据已加载完毕, 则将this.finished设置为true
        if (data.length < this.count) {
          this.finished = true;
        } else {
          this.laoding = true;
        }
      }, 600);
    },
    //每次触底加载数据方法
    loadData() {
      //函数防抖控制触发频率
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.timer = null;
        this.initLoad();
      }, 1000);
    },
    //关注
    getFollowState(item) {
      item.isFollow = !item.isFollow;
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let idArr = [];
      followedData.forEach((item) => {
        idArr.push(item.id);
      });
      if (item.isFollow && idArr.indexOf(item.user.id) == -1) {
        followedData.push(item.user);
        window.localStorage.setItem(
          "followedData",
          JSON.stringify(followedData)
        );
      } else {
        // console.log(followedData.indexOf(item.user));
        followedData.forEach((item2, index) => {
          if (item2.id == item.user.id) {
            followedData.splice(index, 1);
            window.localStorage.setItem(
              "followedData",
              JSON.stringify(followedData)
            );
          }
        });
      }
    },
    //点赞
    getLikeState(item) {
      item.isLike = !item.isLike;
      if (item.isLike) {
        item.isDislike = false;
        item.votes.up++;
      } else {
        item.votes.up--;
      }
    },
    //踩
    getDislikeState(item) {
      item.isDislike = !item.isDislike;
      if (item.isDislike && item.isLike) {
        item.isLike = false;
        item.votes.up--;
      }
    },
    //分享
    addShareCount(item) {
      item.share_count++;
    },
    //删除
    deleteData(item) {
      this.$dialog
        .confirm({
          title: "确定要删除吗?",
        })
        .then(() => {
          // on confirm
          this.loadedData.forEach((item2, index) => {
            if (item2 == item) {
              this.loadedData.splice(index, 1);
            }
          });
          window.localStorage.setItem(
            "historyData",
            JSON.stringify(this.loadedData)
          );
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取已关注
    getFollowedData() {
      let followedData = JSON.parse(
        window.localStorage.getItem("followedData")
      );
      let followedDataId = [];
      followedData.forEach((item) => {
        followedDataId.push(item.id);
      });
      this.loadedData.forEach((item) => {
        if (followedDataId.indexOf(item.user.id) != -1) {
          item.isFollow = true;
        } else {
          item.isFollow = false;
        }
      });
    },
    //跳转评论详情页
    goTocomment(item) {
      window.localStorage.setItem("commentContentData", JSON.stringify(item));
      let dataId = item.id;
      if (dataId != 125654473 && dataId != 125657703) {
        dataId = 125654473;
      }
      this.$router.push(`/comment?id=${dataId}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.history-view {
  padding: 50px 10px;
  ::v-deep .van-nav-bar__arrow {
    color: #000;
    font-size: 20px;
    left: -10px;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: 600;
    font-size: 18px;
  }
	::v-deep .van-nav-bar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 20;
	}
}
</style>